<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-skeleton title :row="10" style="margin-top: 20px" :loading="loading">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        :height="450"
      >
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <!-- <img v-lazy="image.image" /> -->
          <van-image fit="contain" :src="image.image" :height="450"/>
        </van-swipe-item>
      </van-swipe>
      <van-cell
        :title="goods.name"
        :value="'¥ ' + goods.price"
        :label="goods.desc"
        size="large"
      ></van-cell>
      <van-cell title="商品详情" size="large"> </van-cell>
      <van-cell>
        <div class="content" v-html="goods.content"></div>
      </van-cell>
    </van-skeleton>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar";
import { getGoodsById } from "@/api/shopping";

export default {
  name: "GoodDetail",
  components: {
    NavBar,
  },
  props: ["goods_id"],
  data() {
    return {
      title: this.$route.meta.title,
      loading: true,
      images: [],
      goods: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    getGoodsDetail() {
      getGoodsById(this.goods_id).then((res) => {
        this.images = res.data.images;
        this.goods = res.data;
        this.loading = false;
      });
    },
  },
  created() {},
  mounted() {
    console.log(this.goods_id);
    this.getGoodsDetail();
  },
};
</script>

<style  scoped>
.my-swipe img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0rem 0rem;
  background-color: #fff;
  pointer-events: none;
}
</style>